<template>
  <scroller class="pointstagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
    <div id="productlist">
      <div class="pro-list">
        <div class="pro-msg" v-for="item in productlist" @click="routeToTrack((productName = item.title), 'chprodetails', {id: item.id})">
          <div class="mask">
            <img v-if="item.mark === '新品'" src="../../assets/images/newpro.png">
            <img v-else-if="item.mark === '热卖'" src="../../assets/images/hotsale.png">
            <img v-else-if="item.mark === '爆款'" src="../../assets/images/hotcake.png">
          </div>
          <div class="pic">
            <img :src="item.imgUrl">
          </div>
          <div class="txt">
            <p class="title">{{item.title}}</p>
            <!-- <p class="groupPrice">
              <span>精选价:</span>
              <span>{{item.groupPrice}}</span>
              <span>元</span>
            </p> -->
            <p class="groupPrice">
              <span>吊牌价:</span>
              <span>{{item.originalPrice}}</span>
              <span>元</span>
            </p>
          </div>
        </div>
      </div>
      <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
    </div>
  </scroller>
</template>
<script>
  import { LoadMore, Scroller } from 'vux'
  export default {
    name: 'productlist',
    components: {
      LoadMore,
      Scroller
    },
    data () {
      return {
        productlist: [],
        isupload: false,
        isshowload: false,
        loadtip: '',
        bottomCount1: 0
      }
    },
    created () {
      this.getList(this.bottomCount1, this.$route.query.type)
      .then((data) => {
        this.productlist.push.apply(this.productlist, data)
        if (data.length > 0) {
          this.bottomCount1 = this.productlist.length
        }
      }, () => {})
    },
    methods: {
      routeToTrack (productName, name, params) {
        window.zhuge.track('Click', {
          '事件名称': '当月精选-分类-分类详情-商品点击-点击',
          '访问时间': new Date().toLocaleString(),
          'OpenID': this.getCookie('openid'),
          '分类名称': this.$route.meta.title,
          '商品名称': productName
        }, () => {
          this.routeto(name, params)
        })
      },
      getList: function (lastnumber, type) {
        return this.$axios.post(this.apidomain + '/api/productGroupon/findProductGroupon/' + this.getCookie('appid'), {
          pageIndex: lastnumber,
          type: type
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, this.$route.query.type)
              .then((data) => {
                this.productlist.push.apply(this.productlist, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.productlist.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      }
    }
  }
</script>
<style lang="less">
  @import '../../assets/less/productlist/productlist.less';
</style>
